<template>
<div class="console">
  <el-card>
    <el-row>
      <el-col :span="24">
        <EquipDetail></EquipDetail>
      </el-col>
    </el-row>
    <br>
    <el-row>    
      <div style="float:right;">
      <el-col :span="24">
            <el-button @click="changeType(1)" type="text">今日</el-button>
            <el-button @click="changeType(2)" type="text">本周</el-button>
            <el-button  @click="changeType(3)" type="text">本月</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-date-picker v-model="dateRange" @change='selectDate' type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-value="new Date()">
          </el-date-picker></el-col>
      </div> 
    </el-row>

    <el-row title="实时温度数据">
      <!-- <el-col :span="6">
             asd
           </el-col> -->
      <el-col :span="24">
        <lineCharts :selectdate="selectdate"></lineCharts>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>
<script>
import lineCharts from './component/lineCharts'
import EquipDetail from './component/EquipDetail'
import {
    getTemperData
} from '@/api/table'
export default {
  data() {
    return {
      dateRange: [],
      selectdate: {
        x: [],
        y: []
      },
      type: 0
    }
  },
  methods: {
    changeType(index) {
      this.type = index
      this.selectDate()
    },
    Format(strTime) {
      var date = new Date(strTime)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
    },
    selectDate() {
      var start_time = this.Format(this.dateRange[0])
      var end_time = this.Format(this.dateRange[1])
      var xdata = []
      var ydata = []
      getTemperData(this.$route.query.id, this.type, start_time, end_time).then((res) => {
        // for (var i = res.content.length - 1; i > res.content.length - 30; i--) {
        //   if ((start_time < res.content[i].update_time && end_time > res.content[i].update_time)) {
        //     ydata.push(res.content[i].temperature)
        //     xdata.push(res.content[i].update_time)
        //   }
        //   if (start_time === null && this.type !== 1 && i < res.content.length - 20) {
        //     xdata.push(res.content[i].update_time)
        //     ydata.push(res.content[i].temperature)
        //   }
        // }
        res.content.forEach(element => {
          xdata.push(element.create_time)
          ydata.push(element.temperature)
        })
        this.selectdate.x = xdata
        this.selectdate.y = ydata
        xdata = []
        ydata = []
      })
      start_time = null
      end_time = null
      this.type = 0
    }
  },
  created() {
  },
  components: {
    lineCharts,
    EquipDetail
  }
}
</script>
<style>

</style>

